<template>
  <div>
    <main-layout>
      <template v-slot:top>
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="应用名称">
            <el-input v-model="searchInfo.agentName" placeholder="应用名称" clearable />
          </el-form-item>

          <el-form-item label="所属公司">
            <el-select v-model="searchInfo.corpid" clearable placeholder="请选择所属公司" style="width: 140px;">
              <el-option :value="1" label="公司1" />
              <el-option :value="2" label="公司2" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </template>

      <!-- <div class="gva-btn-list">
        <el-button size="small" type="primary" icon="plus" @click="openAdd">新增应用</el-button>
      </div> -->

      <c-table ref="tableRef" :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :loading="loading" @selection-change="selectionChange" rowKey="_id">
        
        <el-table-column align="center" label="名称" min-width="150" prop="name" />
        <el-table-column align="center" label="ID" width="220" prop="external_userid" show-overflow-tooltip/>
        <el-table-column align="center" label="所属公司"  min-width="150" prop="corp_name" />
        <el-table-column align="center" label="状态" width="150" >
          <template #default="scope">
            <span v-if="scope.row.del_external_contact==1">成员已删除</span>
            <span v-else-if="scope.row.del_follow_user==1">客户已取消关注</span>
            <span v-else>正常</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="来源" width="180" prop="templateId" />

        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="text" icon="edit" :disabled="scope.row.type==1" size="small" @click="openEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="delete" :disabled="scope.row.type==1" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </c-table>

      <add v-if="addFlag" v-model:show="addFlag" title="新增模板" @result="getTableData" :editData="editData"/> 

    </main-layout>

  </div>
</template>

<script setup name="CustomList">
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, watch, onActivated,reactive,onMounted} from 'vue'
import {getCustomList,delAgent} from '@/api/user'

import mainLayout from '@/components/custom/mainLayout.vue'
import cTable from '@/components/custom/cTable.vue'
import add from './components/add.vue'
import {formatDateLong,formatDate} from '@/utils/format'
import { useUserStore } from '@/pinia/modules/user'
import {message} from '@/utils/element'
import { ElMessageBox } from 'element-plus'

const userStore = useUserStore()

const pageIndex = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const searchInfo = ref({})
const time = ref('')
const loading = ref(true)
const tableRef = ref(null)
const editData = ref({})
const addFlag = ref(false)

onMounted(()=>{
  init()

})

const init = () => {
  pageIndex.value = 1
  onReset()
  getTableData()
}


const onReset = () => {
  searchInfo.value = {}
}
// 搜索
const onSubmit = () => {
  pageIndex.value = 1
  tableRef.value.clear_selection()  // 清空所选
  getTableData()
}
// 分页
const handleSizeChange = (val) => {
  pageIndex.value = 1
  pageSize.value = val
  getTableData()
}

const handleCurrentChange = (val) => {
  pageIndex.value = val
  getTableData()
}

// 查询
const getTableData = async () => {
  const res = await getCustomList({
    pageIndex:pageIndex.value,
    pageSize:pageSize.value,
    ...searchInfo.value
  })
  if (res.code === 200) {
    tableData.value = res.data.data
    total.value = res.data.total
  }
  loading.value = false
}

let tableCheckeds = []
const selectionChange= (items)=>{
  tableCheckeds = items
}

const openAdd = ()=>{
  editData.value = {}
  addFlag.value = true
}
const openEdit = (item)=>{
  editData.value = item
  addFlag.value = true
}

const del = (item)=>{
    ElMessageBox.confirm('确认删除吗?','提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await delAgent({_id:item._id})
        if(res.code ==200 ){
          pageIndex.value = 1
            getTableData()
        }
    })
}



</script>

<style lang="scss" scoped>
.inputLine {
  display: flex;
  width: 200px;
  .zhi{
    padding: 0 10px;
  }
  s{
    font-style: normal;
    text-decoration: none;
    padding: 0 0 0 5px;
    color: var(--el-text-color-regular);
  }
}
</style>
